import React, { useState } from 'react';
import { Button, Card, Space } from 'antd'
import { connect, history } from 'umi';
import DrawerCondition from '@/components/DrawerCondition';
import PopImgShow from '@/components/PopImgShow';
import DeleteModel from './../DeleteModel'
import SettingCard from '../SettingCard';
import './index.less'
import { useEffect } from 'react';
const Details = (props) => {
  const { dispatch, visible = {}, onClose, handleCallback, loading, setEditVisible } = props;
  const { detail = {}, show = false } = visible;
  const { id } = detail
  const [data, setData] = useState({})
  const [deleteVisible, setDeleteVisible] = useState(false)
  const { picture, goodsName, status, skuHighPrice, price } = data
  const { location = {} } = history;
  const { query = {} } = location;
  const { accessId } = query;
  useEffect(() => {
    if (show) {
      fetchData()
    }
    else {
      setData({})
    }
  }, [show])
  const fetchData = () => {
    dispatch({
      type: 'commodity/fetchOfflineGoodsDetail',
      payload: { goodsId: id },
      callback: (e) => {
        const {
          goodsBaseInfo = {},
          goodsPropertyList = [],
          goodsSkuList = [],
          goodsPackageList = []

        } = e
        setData({
          ...goodsBaseInfo,
          goodsPropertyList,
          goodsSkuList,
          goodsPackageList
        })
      }
    })
  }
  return (
    <Card title='商品详情' extra={<Button onClick={() => onClose()} type='link'>返回列表</Button>}>
      <Space style={{ display: 'flex', width: '100%', alignItems: 'flex-start', position: 'relative' }}>
        <PopImgShow width={100} url={picture}></PopImgShow>
        <div>
          <div style={{ fontSize: 18, fontWeight: 'bold' }}>{goodsName}</div>
          <div style={{ marginTop: 8, color: '#fb6161' }}>{price === skuHighPrice ? `￥${price}` : `￥${price} - ￥${skuHighPrice}`}</div>
          <Space style={{ marginTop: 12 }}>
            <Button onClick={() => {
              history.push({
                pathname: '/commodityModule/commodityEdit',
                query: {
                  id: id,
                  accessId
                }
              })
            }} type='primary'>编辑</Button>
            <Button onClick={() => {
              dispatch({
                type: status === '0' ? 'commodity/fakeUpOfflineGoods' : 'commodity/fakeDownOfflineGoods',
                payload: { goodsIdList: [id] },
                callback: () => {
                  fetchData()
                  handleCallback()
                }
              })
            }} >{status === '0' ? '上架商品' : '下架商品'}</Button>
            <Button danger onClick={() => setDeleteVisible({
              show: true,
              detail: data
            })}>删除 </Button>
          </Space>
        </div>
        <div style={{ position: 'absolute', right: 0, top: 0 }}>
          {status === '0' ? '已下架' : '已上架'}
        </div>
      </Space>
      <SettingCard data={detail}></SettingCard>
      <DeleteModel onFatherClose={onClose} handleCallback={handleCallback} onClose={() => setDeleteVisible(false)} visible={deleteVisible}></DeleteModel>
    </Card>


  );
};
export default Details;
